<template>
  <div class="forgetPassword">
      <div class="content">
          <div class="left">
              <img class="logo" src="../../assets/images/logo_login.png" alt="">
              <span class="lineBox"></span>
              <span class="logo_title">运维管理后台</span>
          </div>
          <div class="right">
              <div class="title">
                  <img class="back_icon" src="../../assets/images/back.png" alt="" @click="backLogin">
                  <span>忘记密码</span>
              </div>
              <el-form class="form" :model="paramsData" label-position="left">
                  <el-form-item>
                      <el-input type="password" v-model.trim="paramsData.newPwd" placeholder="新密码（8~12位，包含大小写字母+数字+特殊字符）"
                          clearable>
                      </el-input>
                  </el-form-item>
                  <el-form-item>
                      <el-input type="password" v-model.trim="paramsData.newPwdConfirm" placeholder="新密码确认（再次输入新密码）"
                          clearable></el-input>
                  </el-form-item>
                  <el-form-item>
                      <el-input v-model.trim="paramsData.mobile" placeholder="手机号" clearable></el-input>
                  </el-form-item>
                  <el-form-item class="item_flex">
                      <el-input v-model.trim="paramsData.picCaptcha" placeholder="请输入验证码（不区分大小写）" clearable></el-input>
                      <div class="identifying_code">
                          <img :src="imgSrc" alt="" @click="get_picCaptcha">
                      </div>
                  </el-form-item>
                  <el-form-item class="item_flex">
                      <el-input v-model.trim="paramsData.mobileCaptcha" placeholder="请输入验证码" clearable></el-input>
                      <span class="getCode" @click="getMobileCaptcha" v-if="countDown == 0">获取验证码</span>
                      <span class="getCode getCode2" v-else>{{ countDown }} 秒</span>
                  </el-form-item>
              </el-form>
              <div class="btn">
                  <el-button type="warning" @click="changePassword">提 交</el-button>
              </div>
          </div>
      </div>

  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue"
import { getPicCaptcha, verifyPicCaptcha, forgetPwd } from "@/http/user";
import { validatePhone, CheckPassWord } from "@/utils/utils";
import { sendSmsCode } from "@/http/message";
import { useMain ,store} from "@/store/index";
import { storeToRefs } from 'pinia';

const router = useRouter()

const useMainStore = useMain(store);//pinia
//storeToRefs 保持响应式  countDown 倒计时
let { countDown } = storeToRefs(useMainStore);

const paramsData = reactive({
  newPwd: "",//新密码
  newPwdConfirm: "",//新密码确认
  mobile: "", //手机号
  mobileCaptcha: "", //手机验证码
  picCaptcha: "", //图形验证码
})


let imgSrc = ref("");

//获取图形验证码
const get_picCaptcha = () => {
  getPicCaptcha().then((res: any) => {
      imgSrc.value = window.URL.createObjectURL(res);
  })
}
get_picCaptcha();

//点击提交按钮
const changePassword = () => {

  if (!paramsData.newPwd) {
      ElMessage({
          message: '请输入新密码!',
          type: 'warning',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      return;
  }

  let res_pwd = CheckPassWord(paramsData.newPwd);//校验密码是否符合规则
  if (!res_pwd) {
      ElMessage({
          message: '密码8~12位，包含大小写字母+数字+特殊字符!',
          type: 'warning',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      return;
  }

  if (!paramsData.newPwdConfirm) {
      ElMessage({
          message: '请输入新密码确认!',
          type: 'warning',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      return;
  }
  if (paramsData.newPwd != paramsData.newPwdConfirm) {
      ElMessage({
          message: '新密码与密码确认不一致!',
          type: 'warning',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      return;
  }

  if (!paramsData.mobile) {
      ElMessage({
          message: '请输入手机号!',
          type: 'warning',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      return;
  } else if (!validatePhone(paramsData.mobile)) {
      ElMessage({
          message: '手机号格式不正确!',
          type: 'warning',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      return;
  }

  if (!paramsData.picCaptcha) {
      ElMessage({
          message: '请输入图形验证码!',
          type: 'warning',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      return;
  }

  if (!paramsData.mobileCaptcha) {
      ElMessage({
          message: '请输入手机验证码!',
          type: 'warning',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      return;
  }
  forgetPwd(paramsData).then((res: any) => {
      ElMessage({
          message: '操作成功!',
          type: 'success',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      router.go(-1);
  }).catch(() => {
    get_picCaptcha();
  })


}

//获取验证码
const getMobileCaptcha = () => {
  console.log('paramsData.mobile', paramsData);
  // console.log(validatePhone(paramsData.mobile));
  if (!paramsData.mobile) {
      ElMessage({
          message: '请输入手机号!',
          type: 'warning',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      return;
  } else if (!validatePhone(paramsData.mobile)) {
      ElMessage({
          message: '手机号格式不正确!',
          type: 'warning',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      return;
  }
  if (!paramsData.picCaptcha) {
      ElMessage({
          message: '请输入图形验证码!',
          type: 'warning',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      return;
  }

  let params = {
      captcha: paramsData.picCaptcha
  }
  verifyPicCaptcha(params).then(res => {
      getMoblieCode();//获取手机验证码
  })
  // getMoblieCode();//获取手机验证码


}
let clock: any = ref(null);//计时器
const getMoblieCode = () => {
  let params = paramsData.mobile
  sendSmsCode(params).then(res => {
      ElMessage({
          message: '发送成功!',
          type: 'success',
          offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
      })
      //开启倒计时
      useMainStore.updatedCountDown(60);
      startCountDown();
  }).catch(err => {
      // console.log('err', err.resultMsg);
      if (err && err.resultMsg == '手机号未登记') {
          //@ts-ignore 取消单行ts验证
          ElMessageBox.alert('该手机号暂未登记,请联系管理员解决', '手机号未登记', {
              confirmButtonText: '确 认',
              showClose: false,
              callback: (action: any) => {

              },
          })
      }
  })
}

//倒计时方法
const startCountDown = () => {
  clock.value = setInterval(() => {
      if (countDown.value > 0) {
          useMainStore.updatedCountDown(countDown.value - 1);
      } else {
          clearInterval(clock.value);
          clock.value = null;
      }
  }, 1000)
}

onMounted(() => {
  //刷新后,倒计时大于0时,重新开始计时器
  if (!clock.value && countDown.value > 0) {
      startCountDown();
  }
})

//页面销毁时,清除定时器
onBeforeUnmount(() => {
  if (clock.value) {
      clearInterval(clock.value);
      clock.value = null;
  }
})

//返回登录页
const backLogin = () => {
  router.go(-1);
}
</script>

<style lang="scss">
.forgetPassword {
  width: 100%;
  height: 100%;
  position: relative;
  background: rgba(0, 0, 0, 1);

  .content {
      width: 100%;
      height: 590px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: url(../../assets/images/login_bg.jpg) no-repeat;
      background-size: 100% 100%;
      padding-top: 0px;
      padding-right: 11.97%;
      padding-left: 18.12%;
      display: flex;

      .left {
          flex: 1;
          padding-top: 238px;
          display: flex;

          .logo {
              width: 110px;
              height: 129px;

          }

          .lineBox {
              width: 3px;
              height: 50px;
              background: rgba(248, 221, 142, 1);
              margin: 50px 36px 0;
          }

          .logo_title {
              font-size: 30px;
              font-weight: 400;
              letter-spacing: 2px;
              line-height: 36.31px;
              color: rgba(192, 164, 91, 1);
              margin-top: 55px;
          }
      }

      .right {
          width: 485px;
          height: 590px;
          background: url(../../assets/images/login_box.png) no-repeat;
          background-size: 100% 100%;
          padding: 32px 50px 28px 50px;

          .title {
              font-size: 24px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 30px;
              color: rgba(192, 164, 91, 1);
              text-align: center;
              vertical-align: top;
              margin-bottom: 33px;
              position: relative;

              .back_icon {
                  height: 20px;
                  position: absolute;
                  left: 0;
                  top: 5px;
                  cursor: pointer;
              }
          }

          .form {
              // flex-direction: column;
              display: block;

              .el-form-item {
                  width: 100%;
                  margin-bottom: 20px;

                  .el-input {
                      width: 100%;
                      height: 60px;
                      line-height: 60px;
                      background: url(../../assets/images/login_input_bg.png) no-repeat;
                      background-size: 100% 100%;


                      .el-input__wrapper {
                          background: rgba(112, 105, 95, 0.2);
                          box-shadow: none;
                          padding-left: 23px;

                          .el-input__inner {
                              font-size: 16px;
                              font-weight: 400;
                              letter-spacing: 0px;
                              line-height: 35px;
                              color: rgba(192, 164, 91, 1);

                              &::placeholder {
                                  font-size: 13px;
                                  font-weight: 400;
                                  letter-spacing: 0px;
                                  line-height: 35px;
                                  color: rgba(192, 164, 91, 1);
                              }
                          }
                      }

                      .el-input__suffix {
                          height: auto;
                          font-size: 20px;

                          .el-input__clear {
                              font-size: 15px;
                              color: rgba(112, 105, 95);
                          }
                      }
                  }
              }

              .item_flex {
                  display: flex;

                  .getCode {
                      width: 100px;
                      height: 30px;
                      border-radius: 5px;
                      background: rgba(192, 164, 91, 1);
                      box-shadow: 0px 2px 7px 0px rgba(169, 143, 84, 0.25);
                      font-size: 14px;
                      font-weight: 400;
                      letter-spacing: 0px;
                      line-height: 30px;
                      text-align: center;
                      color: rgba(255, 255, 255, 1);
                      cursor: pointer;
                      margin-left: 16px;
                  }

                  .getCode2 {
                      background: #ccc;
                  }

                  .identifying_code {
                      width: 125px;
                      height: 60px;
                      background-color: #fff;

                      img {
                          width: 100%;
                          height: 100%;
                          cursor: pointer;
                      }
                  }

                  .el-input {
                      flex: 1;
                  }
              }
          }

          .btn {
              margin-top: 30px;

              .el-button {
                  width: 100%;
                  height: 50px;
                  font-size: 16px;
                  font-weight: 400;
                  letter-spacing: 0px;
                  line-height: 50px;
                  color: rgba(255, 255, 255, 1);
              }
          }

      }
  }
}
</style>
